<template>
    <div class="请修改类名">
        <div class="page-action-ex-btn">
            <div></div>
            <div>
                <el-button v-if="UIAuth.___" type="primary" @click="showAdd">添加</el-button>
                <el-button v-if="UIAuth.___" type="warning" @click="showEdit">修改</el-button>
                <p-confirm-btn @confirm="del" v-if="UIAuth.___"></p-confirm-btn>
            </div>
        </div>
        <div v-if="UIAuth.___">
            <p-table v-loading="loading" :data="dataList" :sub-height="200" :show-paginate="true" v-model="paginate" @row-click="rowClick"
                @row-dblclick="dblClick" @row-clear="rowClear" @selection-change="selectionChange" @paginate="getListPaginate">
                <el-table-column prop="title" label="标题" min-width="230"></el-table-column>

                <el-table-column prop="remark" label="备注" min-width="300"></el-table-column>
            </p-table>
        </div>
        <p-el-dialog v-model="showDialog" :title="`${isEdit ? '修改' : '添加'}`" width="50%" @close="dialogClose" @confirm="isEdit ? edit() : add()" :ok-text="isEdit ? '修改' : '添加'">
            <PForm v-model="validForm" :params="params" status-icon :rules="paramsRules" label-width="120px">
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="params.nickname" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :row="5" v-model="params.remark" placeholder="请输入备注"></el-input>
                </el-form-item>
            </PForm>
        </p-el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {toRefs, ref, onMounted} from "vue";
import {useStore} from "vuex";
import { IPaginate, defaultPaginate } from "@/lib/IApp";
import PTable from "@/components/PTable.vue";
import PElDialog from "@/components/PElDialog.vue";
import message from "@/lib/message";
import utils from "@/lib/utils";
import PConfirmBtn from "@/components/PConfirmBtn.vue";
import PForm from "@/components/PForm.vue";
import http from "@/lib/http/http";

/**
 * 参数校验
 */
const paramsRules = {
    title: [{required: true, message: "请输入名称", trigger: ["blur", "change"]}],
};
const store = useStore();
const {UIAuth,bodySize} = toRefs(store.state);
/**
 * 表单验证
 */
const validForm = ref<any>(() => false);
/**
 * 默认初始化参数数据
 */
const defaultParams = {};
/**
 * 默认初始化搜索条件数据
 */
const defaultSearch = {};

// 是否加载中
const loading = ref<boolean>(false);
/**
 * 分页数据内容
 */
const paginate = ref<IPaginate>(utils.CopyNewObject(defaultPaginate));
/**
 * 数据列表
 */
const dataList = ref<any[]>([]);
/**
 * 是否显示 添加编辑窗口
 */
const showDialog = ref<boolean>(false);
/**
 * 是否修改
 */
const isEdit = ref<boolean>(false);
/**
 * http 请求参数
 */
const params = ref<any>(utils.CopyNewObject(defaultParams));
/**
 * 单选选择的行内容
 */
const tableRow = ref<any>(null);
/**
 * 多选选择的行内容
 */
const tableRows = ref<any[]>([]);
/**
 * 搜索条件
 */
const search = ref<any>(utils.CopyNewObject(defaultSearch));

/**
 * api 接口名称
 */
const urlName = "";
/**
 * 关闭添加编辑窗口
 */
function dialogClose() {
    params.value = utils.CopyNewObject(defaultParams);
    isEdit.value = false;
    showDialog.value = false;
}

/**
 * 显示添加
 */
function showAdd() {
    params.value = utils.CopyNewObject(defaultParams);
    isEdit.value = false;
    showDialog.value = true;
}

/**
 * 显示修改
 */
function showEdit() {
    let editData = null;
    if (utils.empty(tableRow.value)) {
        if (tableRows.value.length == 0) {
            return message.error("请选择要修改数据");
        }
        editData = tableRows.value[0];
    } else {
        editData = tableRow.value;
    }
    params.value = utils.CopyNewObject(editData);
    isEdit.value = true;
    showDialog.value = true;
}

/**
 * 添加
 */
function add() {
    validForm.value((clear:any, obj:any) => {
        message.loadingShow("保存中");
        http.Post(`/${urlName}`, params.value)
            .then((data) => {
                if (dataList.value && dataList.value.length > 0) {
                    dataList.value.unshift(data);
                } else {
                    dataList.value = [data];
                }
                dialogClose();
                clear();
            }).catch((err) => false);
    });
}

/**
 * 删除
 */
function del() {
    const ids:any[] = [];
    if (tableRows.value.length === 0) {
        if (tableRow.value == null) {
            message.error("请选择要删除的数据");
            return;
        } else {
            ids.push(tableRow.value.id);
        }
    }
    tableRows.value.forEach((item) => {
        ids.push(item.id);
    });
    message.loadingShow("删除中");
    http.Delete(`/${urlName}`, { ids }).then((data) => {
        ids.forEach((id) => {
            const index = dataList.value.findIndex((item) => item.id === id);
            if (index >= 0) {
                dataList.value.splice(index, 1);
            }
        });
        tableRows.value = [];
    }).catch((err) => false);
}

/**
 * 修改
 */
function edit() {
    validForm.value((clear:any, obj:any) => {
        message.loadingShow("修改中");
        for (const key in params.value) {
            if (utils.empty(params.value[key])) {
                delete params.value[key];
            }
        }
        http.Put(`/${urlName}`, params.value).then((data) => {
            const index = dataList.value.findIndex((i) => i.id === params.value.id);
            if (index >= 0) {
                for (const key in params.value) {
                    dataList.value[index][key] = params.value[key];
                }
            }
            dialogClose();
            clear();
        }).catch((err) => false);
    });
}

/**
 * 获取数据
 */
function getList() {
    loading.value = true;
    http.Get(`/${urlName}`, search.value)
        .then((data) => {
            if (utils.empty(data)) {
                dataList.value = [];
            } else {
                dataList.value = data;
            }
            loading.value = false;
        }).catch((err) => loading.value = false);

}

/**
 * 获取分页数据
 */
function getListPaginate() {
    loading.value = true;
    http.Get(`/${urlName}/${paginate.value.page_size}/${paginate.value.page}`, search.value)
        .then((data) => {
            dataList.value = data.data;
            paginate.value = data.paginate;
            loading.value = false;
        })
        .catch((err) => loading.value = false);
}

/**
 * 单击选中
 */
function rowClick(val:any) {
    tableRow.value = val.row;
}

/**
 * 双击选择
 */
function dblClick(val:any) {
    showEdit();
}

/**
 * 取消选中
 */
function rowClear() {
    tableRow.value = null;
}

/**
 * 多选时触发
 */
function selectionChange(val = []) {
    tableRows.value = val;
}

/**
 * 初始化
 */
onMounted(() => {
    getListPaginate();
});
</script>

<style scoped lang="scss">
</style>
